<template>
  <page-header-wrapper :title="false">
    <a-card :bordered="false">
      <a-form
        :form="form"
        @submit="handleSubmit"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="问题名称">
          <a-input
            v-decorator="[
              'unname',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please input your E-mail!'
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="关键字">
          <a-input
            placeholder="请选择"
            v-decorator="[
              'unname',
              {
                rules: [
                  {
                    required: true,
                    message: 'Please input your E-mail!'
                  }
                ]
              }
            ]"
          />
          <p style="float: left">多个关键词用","号隔开</p>
        </a-form-item>
        <a-form-item label="回复类型" style="">
          <a-tabs
            type="card"
            default-active-key="1"
            @change="callback"
            style="margin-left: -75px"
          >
            <a-tab-pane key="1" tab="文本回复">
              <a-form-item
                label="回复"
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 22 }"
              >
                <a-textarea
                  placeholder="Controlled autosize"
                  v-decorator="[
                    'unname',
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your E-mail!'
                        }
                      ]
                    }
                  ]"
                  :auto-size="{ minRows: 3, maxRows: 5 }"
                />
              </a-form-item>
              <a-form-item
                label="超链接标题"
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 22 }"
              >
                <a-input
                  placeholder="输入名称"
                  v-decorator="[
                    'ljname',
                    {
                      rules: [
                        {
                          required: false,
                          message: 'Please input your E-mail!'
                        }
                      ]
                    }
                  ]"
                />
              </a-form-item>
              <a-form-item
                label="超链接"
                :label-col="{ span: 2 }"
                :wrapper-col="{ span: 22 }"
              >
                <a-input
                  placeholder="输入名称"
                  v-decorator="[
                    'cname',
                    {
                      rules: [
                        {
                          required: false,
                          message: 'Please input your E-mail!'
                        }
                      ]
                    }
                  ]"
                />
              </a-form-item>
            </a-tab-pane>
            <a-tab-pane key="2" tab="模块数据" force-render>
              Content of Tab Pane 2
            </a-tab-pane>
            <a-tab-pane key="3" tab="问题引导">Content of Tab Pane 3</a-tab-pane>
            <a-tab-pane key="4" tab="商品购买">Content of Tab 商品购买 3</a-tab-pane>
          </a-tabs>
        </a-form-item>

        <a-form-item label="有效时间">1</a-form-item>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
export default {
  name: "Base",
  components: {},
  props: {},
  data() {
    return {
      value: "",
      form: this.$form.createForm(this, { name: "coordinated" }),
      labelCol: { span: 4 },
      wrapperCol: { span: 14 }
    }
  },
  computed: {}, // 计算属性
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values)
        }
      })
    }
  }
}
</script>

<style scoped>
a {
}
</style>
